<template>
	<canvas v-if="canvasId" :id="canvasId" :canvasId="canvasId" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':'-10px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
	 @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @error="error">
	</canvas>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts/u-charts.js';
	var canvases = {};
	
	export default {
		name:"OmUcharts",
		props: {
			chartType: {
				required: true,
				type: String,
				default: 'line'
			},
			opts: {
				required: true,
				type: Object,
				default () {
					return null;
				},
			},
			canvasId: {
				type: String,
				default: 'u-canvas',
			},
			cWidth: {
				default: 330,
			},
			cHeight: {
				default: 250,
			},
			pixelRatio: {
				type: Number,
				default: 1,
			},
			reshow: {
				type: Boolean,
				default: false,
			},
		},
		watch:{
			// chartType(newVal,oldVal){
			// 	this.init()
			// },
			// immediate: true,
			chartType: {
			  handler(newVal,oldVal) {
			    this.init()
			  },
			  immediate:  true,
			  deep: true
			},
			reshow(val, oldval) {
			  if (val === true) {
			    setTimeout(() => {
			      this.init()
			    }, 200);
			  }
			},
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				let num = 0
				let maxList = []
				let max = 0
				if(this.chartType != 'pie'){
					for(let item of this.opts.series){
						let itemMax = Math.max(...item.data)
						maxList.push(itemMax)
					}
					max = Math.max(...maxList)
					if(max <= 2 && max != 0 && max > 1){
						num = 2 
					}else if(max != 0 && max < 1){
						num = 1 
					}else if(max != 0 && max > 2 && max < 3){
						num = 3
					}else if(max != 0 && max >= 3 && max < 4){
						num = 4
					}else{
						num = 5
					}
				}	

				let zmonth = '';
				let syear = this.opts.nowYear
				if(syear){
					let mdata = new Date()
					let nyear = mdata.getFullYear()
					let nmonth = mdata.getMonth()+1
					if(syear == nyear){
						zmonth = nmonth
					}
					if(syear < nyear){
						zmonth = 12
					}
				}
				
				switch (this.chartType) {
					case 'column':
						this.initColumnChart(num);
						break;
					case 'line':
						this.initLineChart(num);
						break;
					case 'cumulative':
						this.initCumulativeChart(num, zmonth);
						break;
					case 'pie':
						this.initPieChart();
						break;
					default:
						break;
				}
			},
			initColumnChart(num) {
				canvases[this.canvasId] = new uCharts({
					$this: this,
					canvasId: this.canvasId,
					type: 'column',
					legend: true,
					padding: [15, 0, 0, 15],
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					categories: this.opts.categories,
					series: this.opts.series,
					enableScroll: false,
					xAxis: {
						disableGrid: true,
						itemCount: 4,
						scrollShow: true
					},
					yAxis: {
						min: 0,
						max: num,
						splitNumber: num,
						//disabled:true
					},
					dataLabel: false,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						column: {
							type: 'group',
						}
					}
				});
			},
			initLineChart(num) {
				console.log(this.reshow)
				canvases[this.canvasId] = new uCharts({
					$this: this,
					canvasId: this.canvasId,
					type: 'line',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					categories: this.opts.categories,
					series: this.opts.series,
					animation: true,
					enableScroll: false,
					reshow: this.reshow,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						itemCount: 4,
						scrollShow: true
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: num,
						min: 0,
						max: num,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			initCumulativeChart(num, month) {
				let arr = this._.cloneDeep(this.opts.series);
				for(let i=0; i<arr.length; i++){
					let num = 0;
					arr[i].name = '累计' + arr[i].name;
					for(let r=0; r<arr[i].data.length; r++){
						if(month){
							if(month < (r+1)){
								arr[i].data[r] = 0
							}else{
								arr[i].data[r] = (arr[i].data[r] ? arr[i].data[r] : 0) + num
								num = arr[i].data[r]
							}
						}else{
							arr[i].data[r] = (arr[i].data[r] ? arr[i].data[r] : 0) + num
							num = arr[i].data[r]
						}
					}
				}
				
				canvases[this.canvasId] = new uCharts({
					$this: this,
					canvasId: this.canvasId,
					type: 'column',
					legend: true,
					padding: [15, 0, 0, 15],
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					categories: this.opts.categories,
					series: arr,
					enableScroll: false,
					xAxis: {
						disableGrid: true,
						itemCount: 4,
						scrollShow: true
					},
					yAxis: {
						min: 0,
						max: num,
						splitNumber: num,
						//disabled:true
					},
					dataLabel: false,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						column: {
							type: 'group',
						}
					}
				});
			},
			initPieChart(){
				canvases[this.canvasId] = new uCharts({
					$this: this,
					canvasId: this.canvasId,
					type: 'pie',
					legend: true,
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					series: this.opts.series,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					dataLabel: true,
					extra: {
					    pie: {
					        lableWidth:15
					    }
					},
				});
			},
			// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
			changeData(cid,newdata) {
				canvases[cid].updateData({
					series: newdata.series,
					categories: newdata.categories
				});
			},
			touchStart(e) {
				canvases[this.canvasId].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
				canvases[this.canvasId].scrollStart(e);
			},
			touchMove(e) {
				canvases[this.canvasId].scroll(e);
			},
			touchEnd(e) {
				canvases[this.canvasId].scrollEnd(e);
			},
			error(e) {
				console.log(e)
			}
		},
	};
</script>

<style scoped>
	.charts {
		width: 100%;
		height: 100%;
		flex: 1;
		background-color: #FFFFFF;
	}
</style>
